<!--
 * @Author: Freude Xu
 * @Date: 2021-09-16 14:23:09
 * @LastEditors: Freude Xu
 * @LastEditTime: 2021-09-23 19:23:48
 * @Description: 
-->

<template>
  <!-- 写在vue中的template标签只允许存在一个div根标签 -->
  <div>
    <!-- 头部 -->
    <!-- 1.创建一个公共组件
      头部结构
      头部样式
      2.使用公共组件
        2.1引入到使用的vue页面中来
        2.2注册组件 components:{Header}
        2.3使用组件
    -->
    <Header></Header>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content">
      <!--悬浮小广告样式的提示信息-->
    <div id="thediv" ref="thediv" style="position: absolute; z-index: 111; left: 0; top: 0;" v-show="thedivShow"
        @mouseover="clearFdAd" @mouseout="starFdAd">
            <img src="../assets/resource/img/logo.jpg" width="320" border=0>
        <div style="cursor: pointer;text-align: right;font-size:12px;color: #999999" @click="thedivShow = false">关闭
        </div>
    </div>
      <!-- 轮播图 -->
      <div class="carousel">
        <div class="wrapper">
          <!-- 访问vue变量carousels 测试轮播图的响应返回数据-->
          <!-- {{carousels}} -->
          <el-carousel height="400px">
            <el-carousel-item v-for="item in carousels" :key="item.id">
              <!-- vue访问变量要加:    src的路径是后台动态的item的url -->
              <img :src="item.url" alt="" />
            </el-carousel-item>
          </el-carousel>
          <!-- <img src="/resource/img/carousel.jpg" alt="" /> -->
        </div>
      </div>
      <!-- 板块 -->
      <div class="plates">
        <div class="wrapper">
          <!-- 循环res返回的数据中的栏目名称 -->
          <div class="plate" v-for="cas in article " :key="cas.category.id">
            <div class="head">
              <!-- 展示板块的标题 -->
              <div class="title" @click="toJump(cas.category)">{{cas.category.name}}</div>
              <div class="more" @click="toJump(cas.category)">更多&gt;&gt;</div>
            </div>
            <ul class="alist">
              <!-- 展示文章的名字 -->
              <li v-for="a in cas.aritcle " @click="toContent(a)" :key="a.id">{{a.title}}</li>
            </ul>
          </div>
        </div>
        <!-- 底部的衔接横幅 -->
        <div class="study">
          <div class="wrapper">
            <img src="../assets/resource/img/study.jpg" alt="">
          </div>
        </div>
        <!-- 底部的一个大板块 -->
        <div class="plate-footer">
          <div class="wrapper">
            <div class="plate_l">
              <div class="head">
                <div class="title">江理人物</div>
                <div class="more">更多&gt;&gt;</div>
              </div>
              <div class="plate-1">
                <img class="plate-1_img" src="../assets/resource/img/plate_l1.jpg" alt="">
                <p>文字</p>
              </div>
              <div class="plate-1">
                <img class="plate-1_img" src="../assets/resource/img/plate_l2.jpg" alt="">
                <p>文字</p>
              </div>
              <div class="plate-1">
                <img class="plate-1_img" src="../assets/resource/img/plate_l3.jpg" alt="">
                <p>文字</p>
              </div>
              <div class="plate-1">
                <img class="plate-1_img" src="../assets/resource/img/plate_l4.jpg" alt="">
                <p>文字</p>
              </div>
              <div class="plate-1">
                <img class="plate-1_img" src="../assets/resource/img/plate_l5.jpg" alt="">
                <p>文字</p>
              </div>
              <div class="plate-1">
                <img class="plate-1_img" src="../assets/resource/img/plate_l6.jpg" alt="">
                <p>文字</p>
              </div>
            </div>
            <div class="plate_r">
              <div class="plate-2">
                <div class="head">
                  <div class="title">热门文章</div>
                  <div class="more">更多&gt;&gt;</div>
                </div>
                <!-- 小的轮播图板块 -->
                <div class="small">
                  <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item v-for="item in carousels" :key="item.id">
                      <img :src="item.url" alt="" />
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <div class="text">
                  <ul>
                    <li v-for="hot in hot" @click="toContent(hot)" :key="hot.id">{{hot.title}}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="sticky">
        <img src="../assets/resource/img/code.jpg" alt="二维码">
        <p>快来扫我！带你了解不一样的江理 </p>
      </div>
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <Footer></Footer>
    <!-- /底部 -->
  </div>
</template>

<script>
var interval;
  //引进了get方法
  import {
    get
  } from "../utils/request";
  //引入header
  import Header from "../components/Header.vue";
  //引入footer
  import Footer from "../components/Footer.vue";
  export default {
    //注册组件
    components: {
      // Header:Header  注册名：组件名
      Header,
      Footer,
    },
    //存储vue变量 返回值为{}
    data() {
      return {
        carousels: [],
        article: [],
        hot: [],
        //漂浮小广告
        xPos: 0,
                yPos: 0,
                xin: true,
                yin: true,
                step: 1,
                delay: 18,
                height: 0,
                Hoffset: 0,
                Woffset: 0,
                yon: 0,
                xon: 0,
                pause: true,
                thedivShow: true,
      };
    },
    //vue在各个阶段执行的函数  生命周期钩子函数
    created() {
      //页面一加载就拿到数据，进行展示
      this.loadCarousel();
      this.loadArticle();
      this.loadHot();
      interval = setInterval(this.changePos, this.delay)
    },
    //methods方法，或者事件处理程序
    methods: {
      //加载轮播图
      //封装加载轮播图
      loadCarousel() {
        let url = "/index/carousel/findAll";
        //箭头函数(a)=>{b}  等同于 function(a){b}
        get(url).then((resp) => {
          //es6的箭头函数没有this指向--this指向vue实例
          this.carousels = resp.data;
        });
      },
      //加载文章
      loadArticle() {
        let url = "/index/article/findCategoryArticles";
        get(url).then((res) => {
          this.article = res.data;
        })
      },
      //加载热门文章
      loadHot() {
        let url = "/index/article/findHotArticles ";
        get(url).then(res => {
          this.hot = res.data;
        })
      },
      //跳转
      toJump(item) {
        // JSON.stringify(item);
        //跳转list页面 编程式路由器导航
        this.$router.push({
          //放跳转的路径 和携带的参数
          path: '/list',
          // name: 'List',
          //携带item进行跳转
          query: item
        })
      },
      //根据文章跳转
      //根据点击的标题名字跳转到文章页面
      toContent(item) {
        this.$router.push({
          path: '/article',
          query: item
        })
      },
      //漂浮小广告
      changePos() {
                let width = document.documentElement.clientWidth;
                let height = document.documentElement.clientHeight;
                this.Hoffset = this.$refs.thediv.offsetHeight; //获取元素高度
                this.Woffset = this.$refs.thediv.offsetWidth;

                // 滚动部分跟随屏幕滚动
                // this.$refs.thediv.style.left = (this.xPos + document.body.scrollLeft + document.documentElement.scrollLeft) + "px";
                // this.$refs.thediv.style.top = (this.yPos + document.body.scrollTop + document.documentElement.scrollTop) + "px";

                // 滚动部分不随屏幕滚动
                this.$refs.thediv.style.left = (this.xPos + document.body.scrollLeft) + "px";
                this.$refs.thediv.style.top = (this.yPos + document.body.scrollTop) + "px";

                if (this.yon) {
                    this.yPos = this.yPos + this.step;
                } else {
                    this.yPos = this.yPos - this.step;
                }
                if (this.yPos < 0) {
                    this.yon = 1;
                    this.yPos = 0;
                }
                if (this.yPos >= (height - this.Hoffset)) {
                    this.yon = 0;
                    this.yPos = (height - this.Hoffset);
                }

                if (this.xon) {
                    this.xPos = this.xPos + this.step;
                } else {
                    this.xPos = this.xPos - this.step;
                }
                if (this.xPos < 0) {
                    this.xon = 1;
                    this.xPos = 0;
                }
                if (this.xPos >= (width - this.Woffset)) {
                    this.xon = 0;
                    this.xPos = (width - this.Woffset);
                }
            },
            clearFdAd() {
                clearInterval(interval)
            },
            starFdAd() {
                interval = setInterval(this.changePos, this.delay)
            }
    }
  };
</script>

<style lang="scss">
  // 可以嵌套使用样式

  //体部样式
  .content {
    background: url(../assets/resource/img/bg.jpg) no-repeat ;

    //漂浮小广告的样式
    #thediv {
        z-index: 100;
        position: absolute;
        top: 43px;
        left: 2px;
        height: 184px;
        width: 280px;
    }
    .carousel {
      img {
        width: 100%;
      }
    }

    .sticky {
      width: 100px;
      float: right;
      position: sticky;
      bottom: 250px;
      margin-right: 40px;
    }

    //板块的设置
    .plates {
      &>.wrapper::after {
        display: block;
        content: "";
        clear: both;
      }

      // 每个模块的样式
      .plate {
        box-sizing: border-box;
        float: left;
        width: 30%;
        height: 350px;
        background-color: #fff;
        margin-right: 5%;
        margin-top: 2em;
        padding: 2em;
        border: 3px double #8f000b;
        box-shadow:2px 2px 2px 2px  brown;
        ul.alist>li {
          line-height: 3em;
          //文字溢出省略号的效果
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        ul>li:hover {
          color: #8f000b;
          cursor: pointer;
        }

        //板块头部的title和更多的设置
        .head {
          display: flex;

          .title {
            display: flex;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
            font-weight: bold;
            color: #8f000b;
            cursor: pointer;
            border-bottom: 4px solid #8f000b;
            flex: 1;
            justify-content: center;
          }

          //更多的设置
          .more {
            display: flex;
            color: #9e1823;
            cursor: pointer;
            flex: 2;
            justify-content: flex-end;
          }

          .more:hover {
            color: #ff9c3a;
          }
        }
      }

      //设置最右边的盒子的margin-right为0
      .plate:nth-child(3n) {
        margin-right: 0;
      }

      // 设置最后一排的底部外边框，使得他们有距离
      .plate:nth-last-child(1),
      .plate:nth-last-child(2),
      .plate:nth-last-child(3) {
        margin-bottom: 2em;
      }
    }

    //底部衔接的图片
    .study {
      img {
        height: 153px;
      }
    }

    //底部稍大一点的板块
    .plate-footer {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-top: 2em;

      //清除浮动
      &>.wrapper::after {
        display: block;
        content: "";
        clear: both;
      }

      //底部左边大盒子的设置
      .plate_l {
        box-sizing: border-box;
        width: 65%;
        background-color: #fff;
        float: left;
        padding: 1.5%;
        margin-bottom: 2em;
        border: 3px double #8f000b;
        box-shadow:2px 2px 2px 2px  brown;

        //板块头部的title和更多的设置
        .head {
          display: flex;
          padding: 10px;

          .title {
            display: flex;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
            font-weight: bold;
            color: #8f000b;
            cursor: pointer;
            border-bottom: 4px solid #8f000b;
            flex: 1;
            justify-content: center;
          }

          //更多的设置
          .more {
            display: flex;
            color: #9e1823;
            cursor: pointer;
            flex: 2;
            justify-content: flex-end;
            margin-right: 3.2%;
          }

          .more:hover {
            color: #ff9c3a;
          }
        }

        // 大盒子内部的小模块的设置
        .plate-1 {
          float: left;
          width: 30%;
          margin-right: 5%;
          padding-top: 2em;
        }

        //设置每行最后一个的margin-right的值
        .plate-1:nth-child(4),
        .plate-1:nth-child(7) {
          margin-right: 0;
        }

        // 设置模块中图片的显示大小
        .plate-1 img {
          width: 100%;
          height: 150px;
        }

      }

      // 设置右边模块
      .plate_r {
        width: 30%;
        background-color: #fff;
        float: right;
        border: 3px double #8f000b;
        box-shadow:2px 2px 2px 2px  brown;

        .plate-2 {
          box-sizing: border-box;
          //给盒子设置内边距
          padding: 5% 10% 10% 10%;

          //板块头部的title和更多的设置
          .head {
            display: flex;
            padding: 10px;

            .title {
              display: flex;
              height: 35px;
              line-height: 35px;
              font-size: 18px;
              font-weight: bold;
              color: #8f000b;
              cursor: pointer;
              border-bottom: 4px solid #8f000b;
              flex: 1;
              justify-content: center;
            }

            //更多的设置
            .more {
              display: flex;
              color: #8f000b;
              cursor: pointer;
              flex: 2;
              justify-content: flex-end;
              margin-right: 3.2%;
            }

            .more:hover {
              color: #ff9c3a;
            }
          }

          // 模块中图片的占比
          .small {
            .el-carousel__item h3 {
              color: #475669;
              font-size: 14px;
              opacity: 0.75;
              line-height: 200px;
              margin: 0;
            }

            .el-carousel__item:nth-child(2n) {
              background-color: #99a9bf;
            }

            .el-carousel__item:nth-child(2n+1) {
              background-color: #d3dce6;
            }
          }

          .text {
            li {
              height: 40px;
              line-height: 40px;
              color: #434343;
              border-bottom: 1px solid #8f000b;
              //文字溢出省略号的效果
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              cursor: pointer;
            }
            li:hover {
              color:#ff9c3a ;
            }
          }
        }
      }
    }
  }
</style>